import React from 'react';
import { Form, Input, Row, Col, InputNumber, Select } from 'antd';
import { SalaryYearInput, SalaryMonthInput } from '@/pages/Recruitment/components/SalaryInput';
import { UploadOssCompact } from '@/containers';
import { formatToThreePart } from '@/utils/utils';
import useDictionary from '@/hooks/useDictionary';

import { InlineInputWrap } from '..';

const { Option } = Select;
const { TextArea } = Input;

export default function Salary({ form, talentInfo, renderItem, isEdit, oneLineLayout, isSecond, hasWorkExp }) {
    const [currencyTypeList] = useDictionary('currencyType');
    const { getFieldDecorator } = form;
    // const hasWorkExp = talentInfo?.recruitTalentBackgroundSalary?.talentWorkType === 1;

    React.useEffect(() => {
        const currentYearSalary =
            form.getFieldValue('recruitTalentBackgroundSalary.monthCount') *
            form.getFieldValue('recruitTalentBackgroundSalary.currentMonthSalary');
        if (!Number.isNaN(currentYearSalary)) {
            form.setFieldsValue({
                'recruitTalentBackgroundSalary.yearSalary': parseInt(currentYearSalary, 10) || undefined
            });
        }
    }, [JSON.stringify(form.getFieldsValue(['recruitTalentBackgroundSalary.currentMonthSalary']))]);
    React.useEffect(() => {
        const currentYearSalary =
            form.getFieldValue('recruitTalentBackgroundSalary.monthCount') *
            form.getFieldValue('recruitTalentBackgroundSalary.currentMonthSalary');
        if (!Number.isNaN(currentYearSalary)) {
            form.setFieldsValue({
                'recruitTalentBackgroundSalary.yearSalary': parseInt(currentYearSalary, 10) || undefined
            });
        }
    }, [JSON.stringify(form.getFieldsValue(['recruitTalentBackgroundSalary.monthCount']))]);
    React.useEffect(() => {
        const monthCount = form.getFieldValue('recruitTalentBackgroundSalary.monthCount');
        const yearSalary = form.getFieldValue('recruitTalentBackgroundSalary.yearSalary');
        const number = !monthCount ? 1 : monthCount;
        const currentMonthSalary = Math.floor(yearSalary / number);
        if (!Number.isNaN(currentMonthSalary)) {
            form.setFieldsValue({
                'recruitTalentBackgroundSalary.currentMonthSalary': currentMonthSalary || undefined
            });
        }
    }, [JSON.stringify(form.getFieldsValue(['recruitTalentBackgroundSalary.yearSalary']))]);

    // const getCurrentYearSalary = () => {
    //     // 仅为显示placeholder
    //     const currentYearSalary =
    //         form.getFieldValue('recruitTalentBackgroundSalary.currentMonthSalary') *
    //         form.getFieldValue('recruitTalentBackgroundSalary.monthCount');

    //     if (Number.isNaN(currentYearSalary)) return null;
    //     return parseInt(currentYearSalary, 10);
    // };

    const expectChange = () => {
        Promise.resolve().then(() => {
            const expectSalary =
                form.getFieldValue('recruitTalentBackgroundSalary.expectMonthNumber') *
                form.getFieldValue('recruitTalentBackgroundSalary.expectMonthSalary');
            if (!Number.isNaN(expectSalary)) {
                form.setFieldsValue({
                    'recruitTalentBackgroundSalary.expectSalary': parseInt(expectSalary, 10)
                });
            }
        });
    };

    const expectSalaryChange = () => {
        Promise.resolve().then(() => {
            const monthCount = form.getFieldValue('recruitTalentBackgroundSalary.expectMonthNumber');
            const expectSalary = form.getFieldValue('recruitTalentBackgroundSalary.expectSalary');
            const number = !monthCount ? 1 : monthCount;
            const monthSalary = Math.ceil(expectSalary / number);
            if (!Number.isNaN(monthSalary)) {
                form.setFieldsValue({ 'recruitTalentBackgroundSalary.expectMonthSalary': monthSalary });
            }
        });
    };

    React.useEffect(() => {
        expectSalaryChange();
    }, [talentInfo]);

    // const getCurrentExpectMonthSalary = () => {
    //     const currentExpectMonthSalary =
    //         form.getFieldValue('recruitTalentBackgroundSalary.expectSalary') /
    //         form.getFieldValue('recruitTalentBackgroundSalary.expectMonthNumber');

    //     if (Number.isNaN(currentExpectMonthSalary)) return null;
    //     return parseInt(currentExpectMonthSalary, 10);
    // };

    React.useEffect(() => {
        const existFileList = talentInfo?.recruitTalentBackgroundSalary?.salaryProveRelations;
        if (existFileList) {
            form.setFieldsValue({
                'recruitTalentBackgroundSalary.salaryProveRelationsFileList': existFileList
            });
        }
    }, [talentInfo]);

    return (
        <Row>
            <div style={{ display: hasWorkExp ? 'block' : 'none' }}>
                <Col span={9}>
                    <Form.Item label="原月薪" {...oneLineLayout}>
                        {renderItem(
                            <InlineInputWrap>
                                <Form.Item style={{ flex: 1 }}>
                                    {getFieldDecorator('recruitTalentBackgroundSalary.currentMonthSalary', {
                                        initialValue: talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary,
                                        placeholder: '请输入原月薪',
                                        rules: [
                                            // {
                                            //     required: true,
                                            //     message: '请输入原月薪'
                                            // }
                                        ]
                                    })(
                                        <InputNumber
                                            style={{ width: '100%' }}
                                            formatter={val => SalaryMonthInput(val, true)}
                                            parser={val => SalaryMonthInput(val)}
                                            min={0}
                                        />
                                    )}
                                </Form.Item>
                                <span
                                    style={{
                                        padding: '0 14px',
                                        display: 'block',
                                        height: '24px',
                                        fontFamily: 'PingFangSC-Regular',
                                        fontSize: '16px',
                                        color: '#161616',
                                        lineHeight: '24px',
                                        marginBottom: '16px',
                                        marginRight: '-7px'
                                    }}
                                >
                                    X
                                </span>
                                <Form.Item style={{ flex: 1 }}>
                                    {getFieldDecorator('recruitTalentBackgroundSalary.monthCount', {
                                        initialValue: talentInfo?.recruitTalentBackgroundSalary?.monthCount || 12,
                                        rules: [
                                            {
                                                required: true,
                                                message: '月份不能为空'
                                            }
                                        ]
                                    })(<InputNumber style={{ width: '100%' }} min={12} />)}
                                </Form.Item>
                                <Form.Item style={{ flex: 1 }}>
                                    {getFieldDecorator('recruitTalentBackgroundSalary.currentSalaryCurrencyCode', {
                                        initialValue:
                                            talentInfo?.recruitTalentBackgroundSalary?.currentSalaryCurrencyCode ||
                                            talentInfo?.recruitTalentBackgroundSalary?.companyCurrencyCode ||
                                            'CNY'
                                    })(
                                        <Select
                                            optionLabelProp="value"
                                            style={{ width: '100%' }}
                                            placeholder="请选择结算货币"
                                            getPopupContainer={trigger => trigger.parentNode}
                                        >
                                            {currencyTypeList &&
                                                currencyTypeList.map(item => (
                                                    <Option key={item.value} value={item.value}>
                                                        {item.value}（{item.dictName}）
                                                    </Option>
                                                ))}
                                        </Select>
                                    )}
                                </Form.Item>
                            </InlineInputWrap>,

                            <>
                                {formatToThreePart(talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary) ? (
                                    <>
                                        <span
                                            style={{
                                                fontFamily: 'PingFangSC-Regular',
                                                fontSize: '16px',
                                                color: 'rgba(0,0,0,0.85)',
                                                fontWeight: '500'
                                            }}
                                        >
                                            {formatToThreePart(
                                                talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary
                                            ) ?? '--'}
                                            {talentInfo?.recruitTalentBackgroundSalary?.currentSalaryCurrencyCode
                                                ? ''
                                                : '元'}
                                        </span>
                                        <span
                                            style={{
                                                padding: '0 7px',
                                                fontFamily: 'PingFangSC-Regular',
                                                fontSize: '16px',
                                                color: 'rgba(0,0,0,0.85)',
                                                fontWeight: '500'
                                            }}
                                        >
                                            X
                                        </span>
                                        <span
                                            style={{
                                                padding: '0 7px',
                                                fontFamily: 'PingFangSC-Regular',
                                                fontSize: '16px',
                                                color: 'rgba(0,0,0,0.85)',
                                                fontWeight: '500'
                                            }}
                                        >
                                            {talentInfo?.recruitTalentBackgroundSalary?.monthCount ?? '--'}
                                            {` ${talentInfo?.recruitTalentBackgroundSalary?.currentSalaryCurrencyCode}` ||
                                                '月'}
                                        </span>
                                    </>
                                ) : (
                                    <span>--</span>
                                )}
                            </>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={8} offset={3} style>
                    <Form.Item style={{ alignItems: 'center' }} label="原年薪" {...oneLineLayout}>
                        <InlineInputWrap>
                            {renderItem(
                                getFieldDecorator(
                                    'recruitTalentBackgroundSalary.yearSalary',
                                    {}
                                )(
                                    <InputNumber
                                        min={0}
                                        formatter={val => SalaryYearInput(val, true)}
                                        parser={val => SalaryYearInput(val)}
                                        // formatter={formatToThreePart}
                                        // disabled
                                        // placeholder="自动生成"
                                        style={{ width: '100%', flexGrow: 1, flexBasis: '100%' }}
                                    />
                                ),
                                formatToThreePart(
                                    talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary *
                                        talentInfo?.recruitTalentBackgroundSalary?.monthCount
                                ) ? (
                                    <span
                                        style={{
                                            fontFamily: 'PingFangSC-Regular',
                                            fontSize: '16px',
                                            color: 'rgba(0,0,0,0.85)',
                                            fontWeight: '500'
                                        }}
                                    >
                                        {formatToThreePart(
                                            talentInfo?.recruitTalentBackgroundSalary?.currentMonthSalary *
                                                talentInfo?.recruitTalentBackgroundSalary?.monthCount
                                        )}{' '}
                                        {talentInfo?.recruitTalentBackgroundSalary?.currentSalaryCurrencyCode || '元'}
                                    </span>
                                ) : (
                                    '--'
                                ),
                                isEdit
                            )}
                            {isEdit && (
                                <Form.Item style={{ flexBasis: '50%', flexGrow: 1, marginBottom: 0 }}>
                                    {getFieldDecorator('recruitTalentBackgroundSalary.currentSalaryCurrencyCode')(
                                        <Select
                                            optionLabelProp="value"
                                            style={{ width: '100%', marginBottom: 0 }}
                                            placeholder="请选择结算货币"
                                            getPopupContainer={trigger => trigger.parentNode}
                                        >
                                            {currencyTypeList &&
                                                currencyTypeList.map(item => (
                                                    <Option key={item.value} value={item.value}>
                                                        {item.value}（{item.dictName}）
                                                    </Option>
                                                ))}
                                        </Select>
                                    )}
                                </Form.Item>
                            )}
                        </InlineInputWrap>
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item label="薪资说明" {...oneLineLayout}>
                        {renderItem(
                            getFieldDecorator('recruitTalentBackgroundSalary.currentSalaryDesc', {
                                initialValue: talentInfo?.recruitTalentBackgroundSalary?.currentSalaryDesc,
                                rules: [{ max: 500, message: '薪资说明不能超过500个字符' }]
                            })(
                                <TextArea
                                    placeholder="请输入薪资说明"
                                    autoSize={{ minRows: 3, maxRows: 5 }}
                                    style={{ width: 476 }}
                                />
                            ),
                            talentInfo?.recruitTalentBackgroundSalary?.currentSalaryDesc ? (
                                <span
                                    style={{
                                        fontFamily: 'PingFangSC-Regular',
                                        fontSize: '16px',
                                        color: 'rgba(0,0,0,0.85)',
                                        fontWeight: '500'
                                    }}
                                >
                                    {talentInfo?.recruitTalentBackgroundSalary?.currentSalaryDesc}
                                </span>
                            ) : (
                                '--'
                            ),
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={24} style={{ marginTop: 24 }}>
                    <Form.Item
                        {...oneLineLayout}
                        label="薪资证明"
                        extra={isEdit ? '支持 pdf、doc、docx、jpg、jpeg、rar 等格式的附件，单个文件大小为10MB以内' : ''}
                    >
                        {!isEdit &&
                            talentInfo?.recruitTalentBackgroundSalary?.salaryProveRelations?.length === 0 &&
                            '--'}
                        {/* 只是为了校验 */}
                        {getFieldDecorator('recruitTalentBackgroundSalary.salaryProveRelationsFileList', {
                            rules: [
                                // {
                                //     validator(rule, value, callback) {
                                //         if (value && !value.length) {
                                //             callback('薪资证明不能为空');
                                //             return;
                                //         }
                                //         callback();
                                //     }
                                // }
                            ]
                        })(
                            <UploadOssCompact
                                rules={[{ max: 10 }, { type: ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'rar'] }]}
                                editable={isEdit}
                                onResourceChange={resource => {
                                    if (!resource) return;
                                    form.setFieldsValue({
                                        'recruitTalentBackgroundSalary.salaryProveRelations': [resource] // = =
                                    });
                                }}
                                ossType="private"
                                categoryCode="talentSalaryProveFile"
                            />
                        )}
                    </Form.Item>
                    <Form.Item style={{ display: 'none' }}>
                        {getFieldDecorator('recruitTalentBackgroundSalary.salaryProveRelations')(<Input />)}
                    </Form.Item>
                </Col>
            </div>

            <Col span={9}>
                <Form.Item label="期望月薪" {...oneLineLayout}>
                    {renderItem(
                        <InlineInputWrap>
                            <Form.Item style={{ flex: 1 }}>
                                {getFieldDecorator('recruitTalentBackgroundSalary.expectMonthSalary', {
                                    // initialValue: talentInfo?.recruitTalentBackgroundSalary?.expectMonthSalary,
                                    rules: [
                                        {
                                            required: !isSecond,
                                            message: '期望月薪不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        min={0}
                                        onChange={expectChange}
                                        style={{ width: '100%' }}
                                        // formatter={formatToThreePart}
                                        // disabled
                                        // placeholder="自动生成"
                                        formatter={val => SalaryMonthInput(val, true)}
                                        parser={val => SalaryMonthInput(val)}
                                    />
                                )}
                            </Form.Item>
                            <span
                                style={{
                                    padding: '0 14px',
                                    display: 'block',
                                    height: '24px',
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: '#161616',
                                    lineHeight: '24px',
                                    marginRight: '-7px',
                                    marginBottom: '16px'
                                }}
                            >
                                X
                            </span>
                            <Form.Item>
                                {getFieldDecorator('recruitTalentBackgroundSalary.expectMonthNumber', {
                                    initialValue: talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber || 12,
                                    rules: [
                                        {
                                            required: true,
                                            message: '月份不能为空'
                                        }
                                    ]
                                })(<InputNumber onChange={expectChange} style={{ width: 140 }} min={12} />)}
                            </Form.Item>
                            <span
                                style={{
                                    marginBottom: '16px',
                                    padding: '0 14px',
                                    display: 'block',
                                    height: '24px',
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: '#161616',
                                    lineHeight: '24px'
                                }}
                            >
                                {talentInfo?.recruitTalentBackgroundSalary?.expectSalaryCurrencyCode ||
                                    talentInfo?.recruitTalentBackgroundSalary?.companyCurrencyCode ||
                                    '月'}
                            </span>
                        </InlineInputWrap>,
                        <>
                            {formatToThreePart(
                                Math.ceil(
                                    talentInfo?.recruitTalentBackgroundSalary?.expectSalary /
                                        talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber
                                )
                            ) ? (
                                <span
                                    style={{
                                        fontFamily: 'PingFangSC-Regular',
                                        fontSize: '16px',
                                        color: 'rgba(0,0,0,0.85)',
                                        fontWeight: '500'
                                    }}
                                >
                                    {formatToThreePart(
                                        Math.ceil(
                                            talentInfo?.recruitTalentBackgroundSalary?.expectSalary /
                                                talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber
                                        )
                                    )}
                                </span>
                            ) : (
                                '--'
                            )}
                            <span
                                style={{
                                    padding: '0 7px',
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                X
                            </span>
                            <span
                                style={{
                                    padding: '0 7px',
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {talentInfo?.recruitTalentBackgroundSalary?.expectMonthNumber ?? '--'}{' '}
                                {talentInfo?.recruitTalentBackgroundSalary?.expectSalaryCurrencyCode ||
                                    talentInfo?.recruitTalentBackgroundSalary?.companyCurrencyCode ||
                                    '月'}
                            </span>
                        </>,
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={8} offset={3}>
                <Form.Item label="期望年薪" {...oneLineLayout} style={{ flex: 1 }}>
                    <InlineInputWrap>
                        {renderItem(
                            getFieldDecorator('recruitTalentBackgroundSalary.expectSalary', {
                                initialValue: talentInfo?.recruitTalentBackgroundSalary?.expectSalary,
                                rules: [
                                    {
                                        required: !isSecond,
                                        message: '期望年薪不能为空'
                                    }
                                ]
                            })(
                                <InputNumber
                                    onChange={expectSalaryChange}
                                    // formatter={formatToThreePart}
                                    min={0}
                                    style={{ width: '100%' }}
                                    formatter={val => SalaryYearInput(val, true)}
                                    parser={val => SalaryYearInput(val)}
                                />
                            ),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {formatToThreePart(talentInfo?.recruitTalentBackgroundSalary?.expectSalary)}{' '}
                                {talentInfo?.recruitTalentBackgroundSalary?.expectSalaryCurrencyCode ||
                                    talentInfo?.recruitTalentBackgroundSalary?.companyCurrencyCode ||
                                    '元'}
                            </span>,
                            isEdit
                        )}
                        {isEdit && (
                            <span
                                style={{
                                    display: 'block',
                                    paddingLeft: 14,
                                    height: '24px',
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: '#161616',
                                    lineHeight: '24px'
                                }}
                            >
                                {' '}
                                {talentInfo?.recruitTalentBackgroundSalary?.expectSalaryCurrencyCode ||
                                    talentInfo?.recruitTalentBackgroundSalary?.companyCurrencyCode ||
                                    '元'}
                            </span>
                        )}
                    </InlineInputWrap>
                </Form.Item>
            </Col>
        </Row>
    );
}
